<template>
  <div class="table-node-warpper">
    <el-card style="width: 100%; height: 100%">
      <template #header>
        <div class="card-header" style="display: flex; justify-content: space-between">
          <div style="width: 100%; word-break: keep-all; white-space: nowrap; /* 防止文本换行 */ text-overflow: ellipsis; overflow: hidden; padding: 15px; font-weight: bold">
            表名2222222222222222223333333333434342
          </div>
        </div>
      </template>
      <div :style="{ height: size.height - 115 + 'px', 'overflow-y': 'auto' }">
        <div v-for="o in 10" :key="o" style="width: 100%; word-break: keep-all; white-space: nowrap; /* 防止文本换行 */ text-overflow: ellipsis; overflow: hidden">
          {{ 'List item ' + o }} {{ '中文说明中文说明中文说明中文说明中文说明' }}
        </div>
      </div>
      <template #footer>
        <div style="width: 100%; display: flex; justify-content: flex-end">
          <div style="padding: 15px">
            <el-space>
              <el-button type="primary" @click.stop="onSelect">选择</el-button>
              <el-button type="danger" @click.stop="onDelete">删除</el-button>
            </el-space>
          </div>
        </div>
      </template>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { type Node } from '@antv/x6';
import { onMounted, ref, inject } from 'vue';
defineOptions({
  name: 'TableNode',
});
import { ElMessageBox } from 'element-plus';
defineProps({});
let node: undefined | Node;
const size = ref<{ width: number; height: number }>({ width: 0, height: 0 });
onMounted(() => {
  const getNode = inject('getNode');
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  //@ts-ignore
  node = getNode() as unknown as Node;
  node.setData({ tableName: 'SYS_USER' });
  size.value = node.getSize() as unknown as { width: number; height: number };
  node.on('change:size', ({ current }) => {
    if (current) {
      size.value = current as unknown as { width: number; height: number };
      console.log(size.value.width);
      console.log(size.value.height);
    }
  });
});
const onDelete = () => {
  if (node) {
    //确认删除
    ElMessageBox.confirm('proxy will permanently delete the file. Continue?', 'Warning', {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    })
      .then(() => {})
      .catch(() => {});
  }
};

const onSelect = () => {
  if (node) {
    const data = node.getData();
    console.log(JSON.stringify(data));
  }
};
</script>
<style lang="scss" scoped>
.table-node-warpper {
  .el-card {
    --el-card-padding: 0px;
  }
}
</style>
